<template>
  <div class="login-wrap">
    <div class="login-title">{{title}}</div>
    <div class="login" v-if="isSignIn">
      <div class="form-group van-hairline--top-bottom">
        <div class="form-input van-hairline--bottom">
          <input type="text" placeholder="手机号" v-model="account" maxlength="11">
        </div>
        <div class="form-input">
          <input type="password" placeholder="密码" ref="password" v-model="password">
          <van-icon name="password-not-view" class="p-show" @click="pShow" v-if="!pShowBol"/>
          <van-icon name="password-view" class="p-show" @click="pShow" v-else/>
        </div>
      </div>
      <div class="form-btn" @click="goLogin">登录</div>
    </div>
    <div class="register" v-else>
      <div class="form-group van-hairline--top-bottom">
        <div class="form-input van-hairline--bottom">
          <input type="text" placeholder="请输入手机号" v-model="account" maxlength="11">
        </div>
        <div class="form-input van-hairline--bottom">
          <input type="password" placeholder="请输入注册密码" ref="password" v-model="password">
        </div>
        <div class="form-input">
          <input type="password" placeholder="确认密码" ref="confirmPassword" v-model="confirmPassword">
        </div>
      </div>
      <div class="form-btn" @click="goRegister">注册</div>
    </div>
    <p class="go-register">
      <span @click="doType">
        <span v-if="isSignIn">注册账号</span>
        <span v-else>登录</span>
      </span>  
    </p>
  </div>
</template>

<script>
import { Icon } from 'vant'
import { POST } from '../../api/common'
export default {
  name: 'login',
  components: {
    [Icon.name]: Icon
  },
  data () {
    return {
      title: '猎球',
      pShowBol: false,
      isSignIn: true,
      account: '',
      password: '',
      confirmPassword: ''
    }
  },
  created() {
    document.getElementsByTagName('body')[0].style.backgroundColor = '#fff'
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      let userInfo = this.$getStorage('userInfo')
      if (userInfo) {
        this.account = userInfo.account
        this.password = userInfo.password
      }
    },
    setUserInfo(token) {
      let userInfo = {
        account: this.account,
        password: this.password
      }
      this.$setToken(token)
      this.$setStorage('userInfo',userInfo)
    },
    doType() {
      this.account = ''
      this.password = ''
      this.confirmPassword = ''
      this.isSignIn ? this.isSignIn = false : this.isSignIn = true
    },
    pShow() {
      if (this.pShowBol) {
        this.pShowBol = false
        this.$refs.password.type = 'password'
      } else {
        this.pShowBol = true
        this.$refs.password.type = 'text'
      }
    },
    checkForm() {
      if (this.account == '' || this.password == '') {
        this.$alert('账号或密码不能为空！')
        return false
      }
      else if (this.account.length < 11) {
        this.$alert('手机号长度不正确！')
        return false
      }
      else if (this.password.length < 6) {
        this.$alert('密码至少为6位数！')
        return false
      }
      if (!this.isSignIn) {
        if (this.password !== this.confirmPassword) {
          this.$alert('密码两次不一致！')
          return false
        }
      }
      return true
    },
    goLogin() {
      if (!this.checkForm()) {
        return
      }
      this.$loading('登录中...')
      let params = {
        tel: this.account,
        password: this.password
      }
      POST('api/login/', params).then(res => {
        this.$close()
  
        if (res.code == 200) {
          this.loginSuccess(res.data)
          this.$router.push('/')
        } 
        else {
          this.$alert('登录失败！')
        }
      })
    },
    goRegister() {
      if (!this.checkForm()) {
        return
      }
      this.$loading('注册中...')
      let params = {
        tel: this.account,
        password: this.password,
        password2: this.confirmPassword
      }
      POST('api/register/', params).then(res => {
        if (res.code == 200) {

          this.$loading('注册成功！')
          this.loginSuccess(res.data)

          setTimeout(() => {
            this.$router.push('/')
            this.$close()
          }, 1500);
        } else {
          this.$alert(res.message)
        }
      })
    },
    loginSuccess(user) {
      document.getElementsByTagName('body')[0].style.backgroundColor = '#fbfbfb'
      this.setUserInfo(user.token)
      this.$store.state.isLogin = user
    }
  }
}
</script>

<style scoped lang="less">
  .login-wrap {
    padding-top: 30%;  
    font-size: 16px;
    .login-title {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 20px;
      text-align: center;
      color: #0075ea;
    }
    .form-group {
      padding-left: 30px;
    }
    .form-input {
      position: relative;
      input {
        display: block;
        width: 280px;
        padding: 0 10px;
        height: 55px;
        line-height: 55px;
        border: 0;  
      }
      .p-show {
        position: absolute;
        top: 18px;
        right: 20px;
        font-size: 18px;
        color: #adadad;
      }
    }
    .form-btn {
      width: 90%;
      margin: 15px auto auto;
      text-align: center;
      color: #fff;  
      height: 45px;
      line-height: 45px;
      background-color: #0075ea;
      border-radius: 3px;
    }
    .go-register {
      text-align: right;
      width: 90%;
      margin: 10px auto auto;
      color: #0075ea;
    }
  }
</style>
